<template>
    <el-card style="margin-top: 10px">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<<<<<<< HEAD
            <el-tab-pane label="综合排序" name="first" >
                <div  class="content-item" >
                    <div class="content-item-com" v-for="img in imageData" :key="img.star">
                        <img style="width: 210px;height: 140px" :src="img.bigImage" alt="">
=======
            <el-tab-pane label="综合排序" name="first">
                <div v-loading="loading" class="content-item">
                    <div class="content-item-com">
                        <img style="width: 210px;height: 140px"
                            src="https://rs.dance365.com/photo/8fd087a700da8604a34262e9befd1da4.jpg" alt="">
>>>>>>> c1949045e4d41849c84bb1e0499f0fa14a7db7dc
                        <div style="margin: 0 10px;height: 130px">
                            <div style="margin: 5px 0; font-size: 14px;height: 30px">{{img.title}}</div>
                            <div style=" width:180px;display: flex;justify-content: space-between;font-size: 12px">
                                <div>{{img.price}}</div>
                                <div>{{img.people}}浏览</div>
                            </div>
<<<<<<< HEAD
                            <div><img src="https://rs.dance365.com/vip_free@3x.png" alt="" style="width: 50px;height: 20px;"></div>
                            <div style="display: flex;margin:5px 0 0 0;font-size: 12px">
                                <svg class="icon" aria-hidden="true" >
=======
                            <div><img src="https://rs.dance365.com/vip_free@3x.png" alt=""
                                    style="width: 50px;height: 20px;"></div>
                            <div style="display: flex;margin:5px 0 0 0">
                                <svg class="icon" aria-hidden="true">
>>>>>>> c1949045e4d41849c84bb1e0499f0fa14a7db7dc
                                    <use xlink:href="#icon-dianzan"></use>
                                </svg>
                                <div style="width: 40px;">{{img.hand}}</div>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-xiaoxi"></use>
                                </svg>
<<<<<<< HEAD
                                <div style="width: 40px;">{{img.message}}</div>
                                <div><el-icon color="yellow"><Star /></el-icon></div>
                                <div style="width: 40px">{{img.star}}</div>
                            </div>
                            <div style="border-top: solid black 1px;font-size: 12px;margin-top: 5px;display: flex;justify-content: space-between;align-items: center;padding: 15px 0">
                                <img style="width: 30px;height: 30px;border-radius: 50%" :src="img.headpicture" alt="">
                                <span>{{img.writer}}</span>
                                <span>{{img.date}}</span>
=======
                                <div style="width: 40px;"></div>
                                <div>
                                    <el-icon color="yellow">
                                        <Star />
                                    </el-icon>
                                </div>
                                <div style="width: 40px"></div>
                            </div>
                            <div
                                style="border-top: solid black 1px;font-size: 12px;margin-top: 5px;display: flex;justify-content: space-between;align-items: center;padding: 15px 0">
                                <img style="width: 30px;height: 30px;border-radius: 50%"
                                    src="https://rs.dance365.com/photo/38fa4676-8435-45fc-a422-c43a72761428.jpg?imageView2/0/w/100/h/100/format/webp/ignore-error/1"
                                    alt="">
                                <span>胡双舞蹈</span>
                                <sapn>20-04-07</sapn>
>>>>>>> c1949045e4d41849c84bb1e0499f0fa14a7db7dc
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="销量" name="second">
                <div v-loading="loading" class="content-item">
                    销量
                </div>
            </el-tab-pane>
            <el-tab-pane label="浏览量" name="third">
                <div v-loading="loading" class="content-item">
                    浏览量
                </div>
            </el-tab-pane>
            <el-tab-pane name="fourth">
                <template #label>
                    <el-popover v-model:visible="visible" placement="top" :width="160">
                        <el-button style="border: 0;margin-left: 13px">价格由低到高</el-button>
                        <el-button style="border: 0;margin-left: 13px">价格由高到低</el-button>
                        <template #reference>
                            <el-button @click="visible = true" style="border: 0;font-size: 17px">
                                价格
                                <el-icon class="el-icon--right">
                                    <arrow-down />
                                </el-icon>
                            </el-button>
                        </template>
                    </el-popover>
                </template>
                <div v-loading="loading" class="content-item">价格</div>
            </el-tab-pane>
        </el-tabs>
        <el-form style="height: 100px;" v-loading="isLoading" v-if="isLoading"></el-form>
        <div style="margin: 10px 0;text-align: center" v-else><el-button @click="toMore" >加载更多</el-button></div>
    </el-card>
</template>
<script lang="ts">
export default {
    name: "ContentItem"
}
</script>
<script setup lang="ts">
<<<<<<< HEAD
import { ArrowDown,Star } from '@element-plus/icons-vue'
import type {TabsPaneContext} from "element-plus";
import {nextTick, ref, withDefaults} from "vue";
import {defineProps} from "vue";
import {useCourseStore} from "@/store/course";
import type {ImageDataListModel} from "@/mock/course";
import { ElLoading } from 'element-plus'

const courseStore=useCourseStore()
interface Props {
    imageData:ImageDataListModel
}

const props=withDefaults(defineProps<Props>(),{
    imageData:[] as any
})
const visible=ref(false)
=======
import { ArrowDown, Star } from '@element-plus/icons-vue'
import type { TabsPaneContext } from "element-plus";
import { ref } from "vue";
const visible = ref(false)
>>>>>>> c1949045e4d41849c84bb1e0499f0fa14a7db7dc

const activeName = ref('first')
const loading = ref(false)
const handleClick = (tab: TabsPaneContext, event: Event) => {
<<<<<<< HEAD
    loading.value=true
=======
    // if(loading.value=true){
    //
    // }
    loading.value = true
>>>>>>> c1949045e4d41849c84bb1e0499f0fa14a7db7dc
    console.log(tab, event)
    setTimeout(() => {
        loading.value = false
    }, 2000)
}

const isLoading=ref(false)
const toMore= ()=>{
    isLoading.value=true
    setTimeout(()=>{
        courseStore.getImageList2()
        isLoading.value=false
    },1000)
}
</script>

<style scoped>

</style>
